<template>
    <div class="container">
    <div class="module">
      <h3>AI application</h3>
      <div class="module-content">
        <!-- 小模块循环渲染 -->
        <div
          class="sub-module"
          v-for="item in basicModules"
          :key="item.id"
          @click="toggleDescription(item.url)"
        >
          <div class="sub-module-content">
            <div class="left-section">
              <div class="logo">
                <img :src="item.logo" alt="Logo" style="width: 30px; height: 30px;">
                <!-- <img src="../static/images/Hostinger.jpg" alt="Logo" style="width: 30px; height: 30px;"> -->
              </div>
              <div class="brand">{{ item.brand }}
                <div class="description" >{{ item.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <!-- 同样的方式添加其他大模块 -->
    <div class="module">
      <h3>AI application</h3>
      <div class="module-content">
        <!-- 小模块循环渲染 -->
        <div
          class="sub-module"
          v-for="item in basicModules"
          :key="item.id"
          @click="toggleDescription(item.id)"
        >
          <div class="sub-module-content">
            <div class="left-section">
              <div class="logo">
                <img :src="item.logo" alt="Logo" style="width: 30px; height: 30px;">
                <!-- <img src="../static/images/Hostinger.jpg" alt="Logo" style="width: 30px; height: 30px;"> -->
              </div>
              <div class="brand">{{ item.brand }}
                <div class="description">{{ item.description }}</div>
              </div>
            </div>

          </div>
        </div>
      </div>
      
    </div>
  </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        basicModules: [
          // 用于建站基础的小模块数据
          // 可以包括多个对象，每个对象代表一个小模块
          {
            brand:"Chat GPT",
            logo:"https://c.runoob.com/wp-content/uploads/2023/02/openai-avatar.png",
            description:" AI text conversation partner for text creators",
            url:"https://chat.openai.com/"
        },
        {
            brand:"Notion AI",
            logo:"https://c.runoob.com/wp-content/uploads/2022/11/notion.png",
            description:"Improve work efficiency, workflow AI",
            url:"https://www.notion.so/"

        },
        {
            brand:"Stable Diffusion",
            logo:"https://c.runoob.com/wp-content/uploads/2023/02/stablediffusionweb.png",
            description:"AI painting that can build itself",
            url:"https://github.com/AUTOMATIC1111/stable-diffusion-webui"
        },
        {
            brand:"DALL·E 2",
            logo:"https://c.runoob.com/wp-content/uploads/2023/02/DALL·E-2.jpg",
            description:"Realistic images and art can be created from natural language descriptions",
            url:"https://openai.com/dall-e-2/"
        },
        {
            brand:"NUWA",
            logo:"https://c.runoob.com/wp-content/uploads/2023/02/nuwa.png",
            description:"Multimodal generation models that generate high-quality images and videos from a given text, image, or video input",
            url:"https://nuwa-infinity.microsoft.com/#/"
        },
        {
            brand:"test",
            logo:"@/static/images/Hostinger.jpg",
            description:"我用过速度最快的空间，裸站速度0.6s！太猛了"
        },
        {
            brand:"test",
            logo:"@/static/images/Hostinger.jpg",
            description:"我用过速度最快的空间，裸站速度0.6s！太猛了"
        },
        {
            brand:"test",
            logo:"@/static/images/Hostinger.jpg",
            description:"我用过速度最快的空间，裸站速度0.6s！太猛了"
        },
        {
            brand:"test",
            logo:"@/static/images/Hostinger.jpg",
            description:"我用过速度最快的空间，裸站速度0.6s！太猛了"
        },
        {
            brand:"test",
            logo:"@/static/images/Hostinger.jpg",
            description:"description"
        },
        ],
        outsourcingModules: [
          // 用于靠谱外包的小模块数据
          // 可以包括多个对象，每个对象代表一个小模块
        ],
      };
    },
    methods:{
      toggleDescription(url){
        window.open(url, "_blank");
      }
    }
  }
  </script>
  
  <style scoped>
  .container {
    display: flex;
    justify-content: space-between;
    padding: 40px;
    background-color: #F5F5F5;
    /* 在这里添加更多容器级样式，以设置左右留白等 */
    flex-direction: column;
    padding: 20px;
  }




  .description {
  margin-top: 11px; /* 为描述文本添加一些顶部间距 */
  font-size: 11px; /* 设置描述文本的字体大小 */
  color: gray; /* 设置描述文本的颜色 */
  /* 可以根据需要添加其他样式，如字体样式、行高等 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的最大行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
  .module {
    flex: 1;
    background-color: #FFFFFF;
    margin: 14px;
    padding: 20px;
    margin-top: 20px;
}
  
  .module h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .module-content {
    display: flex;
    flex-wrap: wrap;
    /* 控制小模块从左到右每行5个，超出自动换行 */
  }
  
  

  .sub-module {
    flex: 0 0 calc(14% - 11px);
    margin: 10px;
    padding: 10px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}
  .sub-module:hover {
  background-color: #f5f5f5; /* 悬停时的背景颜色 */
}
  .sub-module-content {
  display: flex;
  /* flex-direction: column;
  align-items: center;
  text-align: center; */
  justify-content: space-between;
}
.left-section {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 0px;
}
.right-section {
    flex: 1;
    margin-top: 35px;
    margin-left: -28px;
}
.brand {
    font-weight: bold;
    /* margin-top: -37px;*/
    margin-left: 10px; 
}
  
  /* 添加其他样式以适应不同屏幕尺寸，例如媒体查询 */
  
  @media (max-width: 768px) {
    .container {
      flex-direction: column; /* 手机上垂直布局 */
    }
  
    .module {
      margin: 10px 0; /* 手机上模块之间添加空隙 */
    }
  }
  </style>
  